<template>
	<view class="resourceMain">
		<uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="teacon" v-show="AllList.length>0">
			<view class="tealeft" v-for="(item,n) in AllList" @click="getDeatil">
				<view class="timg">
					<image :src="item.image" mode=""></image>
				</view>
				<text class="tt1 u-line-1">{{item.name}}</text>
				<view class="tinfo">
					<view>
						<text class="yan" style="width: 24rpx; margin-right: 4rpx;">
							<image style="width: 24rpx;" src="@/static/images/index/yan.png" mode=""></image>
						</text>
						<text>{{item.show_number}}</text>
						<text class="san">
							<image src="@/static/images/index/san.png" mode="">
							</image>
						</text>
					</view>
					<text @click.stop='toJoin(item)' class="yy">加盟合作</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				id: '',
				title: '',
				AllList: []
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.id = item.id;
			this.title = item.name;
		},
		onReady() {
			this.getList()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() {
				this.$api.post({
					url: '/resource/pageList',
					data: {
						resource_cate_id: this.id,
						page: '1',
						per_page: '15'
					},
					success: res => {
						console.log(res);
						this.AllList = res.list.data;

					},
					fail: error => {
						console.log(error)
					}
				})
			},
			getDeatil() {
				uni.navigateTo({
					url: '/pages/teacher/JoinICoperation',

				})
			},
			toJoin(item) {
			
				uni.navigateTo({
					url: '/pages/teacher/JoinPart',

				})
			},

		}
	}
</script>

<style lang="scss">
	.resourceMain{
		background-color: #FFFFFF;
		
		/deep/.uni-nav-bar-text {
			font-size: 36rpx;
			color: #333333;
			font-weight: 800;
		}
		.teacon {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
				flex-wrap: wrap;
				height: auto;
				// overflow: hidden;
				padding: 0 30rpx;
		
				.tealeft,
				.tearight {
					width: 336rpx;
					height: 300rpx;
					background: rgba(255, 255, 255, 0.39);
					box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
					opacity: 1;
					margin-bottom: 20rpx;
					.timg {
		
						image {
							width: 316rpx;
							height: 176rpx;
						}
		
						width: 316rpx;
						height: 176rpx;
						// background-color: pink;
						margin: 0 auto;
						margin-top: 10rpx;
					}
		
					.tt1 {
						display: block;
						margin-left: 10rpx;
						margin-top: 16rpx;
						font-size: 28rpx;
						color: #333333;
						font-weight: 400;
					}
		
					.tinfo {
						display: flex;
						justify-content: space-between;
						padding: 0 10rpx;
						margin-top: 14rpx;
		
						.yan,
						.san {
							display: inline-block;
							width: 16rpx;
							height: 20rpx;
		
							image {
								width: 100%;
								height: 100%;
							}
						}
		
						.san {
							margin-left: 30rpx;
						}
		
						.yy {
							width: 100rpx;
							height: 36rpx;
							font-size: 22rpx;
							color: #FFFFFF;
							background: rgba(231, 186, 119, 1);
							text-align: center;
							padding: 3rpx;
						}
					}
				}
			}
		
	}
</style>
